<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <title>Ttile</title>

</head>
<body>
<input type="hidden" id="date" th:value="${id}" >
<input type="text" id="code" name="">

<div id="div1" style="height:800px;width:200px ; overflow:scroll ;float: left">

</div>
<div id="main" style="width:1600px ; height : 800px ; background: white;float: right">

    <script>
        var date =$("#date").val()
        $.ajax({
            url:"/system/screenstock/getList?id="+date,
            // 把code输入框的值传到url后面,然后用hello对应的函数处理
            success:function(rawData){
                var tab = "<ul>"; //通过 += 的方式将代码放到一个变量里，实现表单的形成。
                for (var i=0;i<rawData.length;i++){
                    tab +="<li>";
                    tab +="<td> <button onclick=fn('"+rawData[i].symbol+"')>"+rawData[i].name+ "</button></td>";
                    tab +="</li>";
                }
                tab +="</ul>";
                var  divv = document.getElementById("div1");
                divv.innerHTML=tab;  //把table代码设置到div里
            }})

        const upColor = '#ec0000';
        const upBorderColor = '#8A0000';
        const downColor = '#00da3c';
        const downBorderColor = '#008F28';
        function fn(this_){
            // 发送ajax请求，需要用到jquery
            $.ajax({
                url:"/system/stock/dataList?symbol="+this_,
                // 把code输入框的值传到url后面,然后用hello对应的函数处理
                success:function(rawData){
                    debugger
                    $("#code").val(this_)
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    function calculateMA(dayCount, data) {
                        var result = [];
                        for (var i = 0, len = data.length; i < len; i++) {
                            if (i < dayCount) {
                                result.push('-');
                                continue;
                            }
                            var sum = 0;
                            for (var j = 0; j < dayCount; j++) {
                                sum += +data[i - j][1];
                            }
                            result.push(sum / dayCount);
                        }
                        return result;
                    }
                    const dates = rawData.map(function (item) {
                        return item[0];
                    });
                    const data = rawData.map(function (item) {
                        return [+item[1], +item[2], +item[3], +item[4]];
                    });
                    option = {
                        legend: {
                            data: ['日K', 'MA5', 'MA13', 'MA21'],
                            inactiveColor: '#777'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                animation: false,
                                type: 'cross',
                                lineStyle: {
                                    color: '#376df4',
                                    width: 2,
                                    opacity: 1
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: dates,
                            axisLine: { lineStyle: { color: '#8392A5' } }
                        },
                        yAxis: {
                            scale: true,
                            axisLine: { lineStyle: { color: '#8392A5' } },
                            splitLine: { show: false }
                        },
                        grid: {
                            bottom: 80
                        },
                        dataZoom: [
                            {
                                textStyle: {
                                    color: '#8392A5'
                                },
                                handleIcon:
                                    'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                                dataBackground: {
                                    areaStyle: {
                                        color: '#8392A5'
                                    },
                                    lineStyle: {
                                        opacity: 0.8,
                                        color: '#8392A5'
                                    }
                                },
                                brushSelect: true
                            },
                            {
                                type: 'inside'
                            }
                        ],
                        series: [
                            {
                                type: 'candlestick',
                                name: 'Day',
                                data: data,
                                itemStyle: {
                                    color: '#FD1050',
                                    color0: '#0CF49B',
                                    borderColor: '#FD1050',
                                    borderColor0: '#0CF49B'
                                }
                            },
                            {
                                name: 'MA5',
                                type: 'line',
                                data: calculateMA(5, data),
                                smooth: true,
                                showSymbol: false,
                                lineStyle: {
                                    width: 1
                                }
                            },
                            {
                                name: 'MA13',
                                type: 'line',
                                data: calculateMA(13, data),
                                smooth: true,
                                showSymbol: false,
                                lineStyle: {
                                    width: 1
                                }
                            },
                            {
                                name: 'MA21',
                                type: 'line',
                                data: calculateMA(21, data),
                                smooth: true,
                                showSymbol: false,
                                lineStyle: {
                                    width: 1
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })
        }

    </script>
</body>
</html>
